// TODO: RAF

// 想要动画流畅, 更新频率要 60帧/s, 即1000ms/60, 16.67ms 更新一次视图
// 假设用 setTimeout 手动控制频率, 16.67ms 执行一次
    // 16.67ms 只是表示 16.67ms 后将任务加入到"任务队列"中, 必须等到当前代码（执行栈）执行完, 主线程才会去执行它指定的回调函数
    // 如果当前代码耗时很长, 有可能要等很久, 所以并没有办法保证, 回调函数一定会在 setTimeout() 指定的时间执行
// requestAnimationFrame 基本思想就是与刷新频率保持同步, 利用刷新频率进行页面重绘
    // 此外使用这个API, 一旦页面不处于浏览器的当前标签, 就会自动停止刷新, 这就节省了CPU、GPU
// 另外, HTML5标准规定了 setTimeout() 的第二个参数的最小值（最短间隔）不得低于 4 毫秒

// 3s 把宽度从 100px 变为 640px ，即增加 540px
// 60帧/s ，3s 180帧, 即180次变化, 每次变化 3px

const $div1 = $('#div1')
let curWidth = 100
const maxWidth = 640

// // setTimeout
// function animate() {
//     curWidth = curWidth + 3
//     $div1.css('width', curWidth)
//     if (curWidth < maxWidth) {
//         setTimeout(animate, 16.7) // 自己控制时间
//     }
// }
// animate()

// RAF
function animate() {
    curWidth = curWidth + 3
    $div1.css('width', curWidth)
    if (curWidth < maxWidth) {
        window.requestAnimationFrame(animate) // 时间不用自己控制
    }
}
animate()
